<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useCourse } from '@/composables/useCourse'
import { getRouteLocation } from '@/modules/mimo/router'

import type { ExperimentModel } from '@/apis/course'
import type { ListItem } from '@/types/components-tool'

const props = withDefaults(defineProps<{ courseID: number }>(), {
  courseID: 0
})

const { course, isLoading } = useCourse(computed(() => props.courseID))

const route = useRoute()
const router = useRouter()
const handleExperimentNavigation = async (experiment: ExperimentModel) => {
  await router.push(getRouteLocation(experiment, route.params.classID as string))
}
</script>

<template>
  <div class="card px-0 pb-0">
    <h3 class="card-title px-xs">
      <i class="i-fluent-diversity-48-filled text-lg" />
      {{ course?.course.name }}
      <span class="text-arco-3 font-normal text-sm">
        ( {{ course?.course.id }}* {{ course?.course.description }} )
      </span>
    </h3>
    <a-list :bordered="false" :data="course?.experiments" size="small" :loading="isLoading">
      <template #item="{ item }: ListItem<ExperimentModel>">
        <div
          @click="handleExperimentNavigation(item)"
          border-b="solid 1 last:none"
          class="px-lg py-2 border-arco-2 hover:cursor-pointer hover:bg-arco-gray-1"
        >
          <h4 class="my-0 text-arco-2">
            <a-typography-text code>ID: {{ item.id }}</a-typography-text>
            {{ item.name }}
          </h4>
          <p class="mb-0 mt-1 text-arco-3">{{ item.description }}</p>
        </div>
      </template>
    </a-list>
  </div>
</template>
